<template>
	<view>
		<view class="example-body">
			<uni-steps :options="list1" active-color="#007AFF" :active="active" />
		</view>
		<view class="example-body" v-if="active === 0">
			<view class="uni-form-item uni-column" v-for="(item, j) in items" :key="j">
				<view class="with-fun">
					<input class="uni-input" placeholder="请输入类型名称" :id="item.id" :value="item.name" @input="clearInput" />
					<view class="uni-icon uni-icon-clear" @click="clearIcon(item)"></view>
				</view>
			</view>
			<button type="primary" @click="addItem">添加类型</button>
		</view>
		<view class="uni-common-mt" v-if="active === 1">
			<view class="uni-form-item uni-column" v-for="(item, j) in items" :key="j">
				<view class="title">{{item.name}}:</view>
				<input class="uni-input" type="digit" placeholder="请输入金额" :id="item.id" :value="item.data" @input="setValue" />
			</view>
		</view>
		<view class="qiun-charts" v-if="active === 2">
			<!--#ifdef MP-ALIPAY -->
			<canvas canvas-id="canvasPie" id="canvasPie" class="charts" :width="cWidth*pixelRatio" :height="cHeight*pixelRatio"
			 :style="{'width':cWidth+'px','height':cHeight+'px'}" @touchstart="touchPie($event,'canvasPie')"></canvas>
			<!--#endif-->
			<!--#ifndef MP-ALIPAY -->
			<canvas canvas-id="canvasPie" id="canvasPie" class="charts" @touchstart="touchPie($event,'canvasPie')"></canvas>
			<!--#endif-->
		</view>
		<button type="primary" v-if="active>0" @click="goPre">上一步</button>
		<button type="primary" v-if="active<2" @click="goNext">下一步</button>
		<button type="primary" v-if="active==2" @click="save">保存</button>
	</view>
</template>

<script>
	import uniSteps from '@/components/uni-steps/uni-steps.vue'
	import uCharts from '@/components/u-charts/u-charts.js';
	var _self;
	var canvasObj = {};
	export default {
		components: {
			uniSteps,
		},
		data() {
			return {
				active: 0,
				list1: [{
					title: '设置财务类型'
				}, {
					title: '填写数据'
				}, {
					title: '生成图表'
				}],
				items: [],

				cWidth: '',
				cHeight: '',
				cWidth2: '', //横屏图表
				cHeight2: '', //横屏图表
				cWidth3: '', //圆弧进度图
				cHeight3: '', //圆弧进度图
				arcbarWidth: '', //圆弧进度图，进度条宽度,此设置可使各端宽度一致
				gaugeWidth: '', //仪表盘宽度,此设置可使各端宽度一致
				tips: '',
				pixelRatio: 1,
				serverData: '',
				itemCount: 30, //x轴单屏数据密度
				sliderMax: 50
			}
		},
		onLoad() {
			_self = this;
			//#ifdef MP-ALIPAY
			uni.getSystemInfo({
				success: function(res) {
					if (res.pixelRatio > 1) {
						//正常这里给2就行，如果pixelRatio=3性能会降低一点
						//_self.pixelRatio =res.pixelRatio;
						_self.pixelRatio = 1;
					}
				}
			});
			//#endif
			this.cWidth = uni.upx2px(750);
			this.cHeight = uni.upx2px(500);
			this.cWidth2 = uni.upx2px(700);
			this.cHeight2 = uni.upx2px(1100);
			this.cWidth3 = uni.upx2px(250);
			this.cHeight3 = uni.upx2px(250);
			this.arcbarWidth = uni.upx2px(24);
			this.gaugeWidth = uni.upx2px(30);

		},
		methods: {
			clearInput: function(event) {
				this.items.filter(m => m.id == event.target.id)[0].name = event.target.value
			},
			setValue: function(event) {
				this.items.filter(m => m.id == event.target.id)[0].data = parseFloat(event.target.value) 
			},
			clearIcon: function(item) {
				this.items = this.items.filter(m => m.id != item.id)
			},
			addItem() {
				this.items.push({
					name: '',
					id: new Date().getTime(),
					data: 0
				});
			},
			goPre() {
				this.active -= 1;
			},
			goNext() {
				this.active += 1;
				if (this.active == 2) {
					console.log(this.items)
					this.fillData();
				}
			},
			save() {

			},
			fillData() {
				let Pie = {
					series: []
				};
				Pie.series = this.items;
				console.log(Pie);
				this.showPie("canvasPie", Pie);
			},
			changeData(canvasId) {
				canvaColumn[canvasId].updateData({
					series: [],
				});
			},
			showPie(canvasId, chartData) {
				canvasObj[canvasId] = new uCharts({
					$this: _self,
					canvasId: canvasId,
					type: 'pie',
					fontSize: 11,
					padding: [15, 15, 0, 15],
					legend: {
						show: true,
						padding: 5,
						lineHeight: 11,
						margin: 0,
					},
					background: '#FFFFFF',
					pixelRatio: _self.pixelRatio,
					series: chartData.series,
					animation: false,
					width: _self.cWidth * _self.pixelRatio,
					height: _self.cHeight * _self.pixelRatio,
					dataLabel: true,
					extra: {
						pie: {
							lableWidth: 15
						}
					},
				});
			},
			touchPie(e, id) {
				canvasObj[id].showToolTip(e, {
					format: function(item) {
						return item.name + ':' + item.data
					}
				});
			}
		}
	}
</script>

<style>
	/* 头条小程序组件内不能引入字体 */
	/* #ifdef MP-TOUTIAO */
	@font-face {
		font-family: uniicons;
		font-weight: normal;
		font-style: normal;
		src: url('~@/static/uni.ttf') format('truetype');
	}

	/* #endif */
	page {
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		background-color: #efeff4;
		min-height: 100%;
		height: auto;
	}

	view {
		font-size: 14px;
		line-height: inherit;
	}
	button {
	    margin-top: 30upx;
	    margin-bottom: 30upx;
	}
	.charts {
		width: 750upx;
		height: 500upx;
		background-color: #FFFFFF;
	}
	.qiun-charts {
		width: 750upx;
		height: 500upx;
		background-color: #FFFFFF;
	}

	.title {
		padding: 10upx 25upx;
	}

	.uni-icon-clear,
	.uni-icon-eye {
		color: #999;
	}

	.example-body {
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: center;
		padding: 0;
		font-size: 14px;
		background-color: #ffffff;
	}

	.example-body {
		flex-direction: column;
		padding: 15px;
		background-color: #ffffff;
	}

	.example-body {
		/* #ifndef APP-NVUE */
		display: block;
		/* #endif */
		padding: 15px;
		flex-direction: row;
	}
</style>
